<template>
  <el-container>
    <!-- 搜索框 -->
    <el-aside class="searchBox">
      <el-input
          class="w-50 m-2"
          size="large"
          placeholder="请输入作者笔名"
          v-model="authorList.name"
          v-on:keyup.enter="getAuthorList"
      />
    </el-aside>
    <el-button type="primary" plain size="large" class="search" @click="getAuthorList">查询</el-button>
  </el-container>

  <!-- 数据列表 -->

  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="penName" label="作者笔名" width="180" />
    <el-table-column prop="telPhone" label="手机号码" width="180" />
    <el-table-column prop="email" label="电子邮箱" />
    <el-table-column prop="workDirection" label="作品方向" />
    <el-table-column prop="createTime" label="创建时间" />

    <!-- 功能按钮 -->
    <el-table-column label="操作" #default="scope">
      <el-row class="mb-4">
        <el-button type="success" plain @click="deleteAuthorHandle(scope.row.id)">删除</el-button>
      </el-row>
    </el-table-column>
  </el-table>


  <!-- 分页工具条 -->
  <div class="page">
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        class="mt-4"
        prev-text="上一页"
        next-text="下一页"
        v-model:total="total"
        :hide-on-single-page="true"
        :background="true"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>

</template>

<script setup>
import "@/assets/styles/book.css";
import {onMounted, ref} from "vue";
import {deleteAuthorById, getAuthorLists} from "@/api/backend";
import {ElMessage} from "element-plus";
import {getBackendType} from "@/utils/auth";

// 总条数
const total = ref(300)
// 当前页
const currentPage = ref(1);
// 每页显示条目数
const pageSize = ref(10);
const authorList = ref({
  // 搜索框绑定数据模型
  name: "",
  pageNum: 1,
  pageSize: 10
});
// 列表数据
const tableData = ref([{
  id: 1,
  penName: "笔名",
  telPhone: "手机号码",
  email: "电子邮箱",
  workDirection: "作品方向",
  createTime: "创建时间"
}]);

onMounted(() => {
  getAuthorList();
});

const getAuthorList = async () => {
  const {data} = await getAuthorLists(authorList.value);
  tableData.value = data.list;
  currentPage.value = parseInt(data.pageNum);
  pageSize.value = parseInt(data.pageSize);
  total.value = parseInt(data.total);
}

// 当前页
const handleSizeChange = (val) => {
  console.log(`${val} items per page`);
  authorList.value.pageNum = val;
  getAuthorList()
}
// 每页显示行数
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`);
  authorList.value.pageSize = val;
  getAuthorList()
}

// 删除作者
const deleteAuthorHandle = async (id) => {
  console.log(id);
  const success = await deleteAuthorById(id);
  if (success.ok) {
    ElMessage.success("删除成功");
    getAuthorList();
  } else {
    ElMessage.error("删除失败");
  }
}


</script>

<style scoped lang="scss">
.searchBox {
  width: 300px;
  height: 60px;
  line-height: 50px;
  padding: 5px;
}
.search {
  margin: 10px;
}
.searchButton {
  width: 200px;
  height: 60px;
  line-height: 60px;
  //text-align: right;
  padding: 0;
  position: absolute;
  right: 5px;
}

.el-pagination {
  justify-content: center;
}
.el-pagination.is-background .el-pager li:not(.is-disabled).is-active {
  background-color: lightblue !important;
}
.el-pagination {
  --el-pagination-hover-color: lightblue !important;
}
</style>